<template>
  <div class="ScaleBox" style="--scaleX:1; --scaleY:1;" v-loading="loading">
    <div class="reportBox">
      <div class="btn-box zhbtnbox">
        <!-- <div class="btn-item" @click="PrintPdf()">打印</div>
        <div class="btn-item" :class="btnload?'nockickn':''" @click="downLoadPdf()">{{ btnload ? '导出中 ...' : '导出' }}</div> -->
        <el-button  class="btntxt" size="medium" @click="PrintPdf()">打印</el-button>
        <el-button class="btntxt"  size="medium"  :loading="btnload" @click="downLoadPdf">{{ btnload ? '导出中 ...' : '导出' }}</el-button>
      </div>
      <div id="pdfDomBox" ref="pdfDom">
        <div class="reportHeader">
          {{wswscdInfos.name}}预演分析判断报告 
        </div>
        <div id="pdfDom" class="print-content">
          <div class="content-item left-box">
            <div id="mapBox" class="margBot20 ">
              <miniMap></miniMap>
              <!-- <div id="mapBoxTitle" class="boxItemTitle">地图</div> -->
            </div>
            <div id="RainBox" class="box-item">
              <div class="boxItemTitle">雨水情</div>
              <div class="boxItemForm">
                <div>
                  <span class="marginRightSpan">数据来源：
                    {{ exepData.source?exepData.source:'--' }}
                  </span>
                  <span class="marginRightSpan">降雨时段：
                    {{ exepData.rainSt? $moment(exepData.rainSt).format("YYYY-MM-DD HH:mm:ss") : "--" }}至{{ exepData.rainEt?$moment(exepData.rainEt).format("YYYY-MM-DD HH:mm:ss"):'--' }}
                  </span>
                </div>
                <div>
                  <span class="marginRightSpan">叠加/放大方案：
                    {{ exepData.overScheme?exepData.overScheme:'--' }}
                  </span>
                </div>
              </div>
              <div class="boxItemLitleTitle">
                降雨监测:
              </div>
              <div class="tablelists">
                <el-table :data="tableData3"  empty-text="暂无数据" border style="width: 100%">
                 <el-table-column prop="name" align="center" label="时间">
                  <template slot-scope="scope">
                    <span> {{ scope.row.tm | dateformat }}</span>
                  </template>
                </el-table-column>
                <el-table-column prop="arealP" align="center" label="面雨量(mm)" />
                <el-table-column prop="areaBigP" align="center" label="放大量(mm)" />
                <el-table-column prop="rehearsalP" align="center" label="预演面雨量(mm)" />
                </el-table>
              </div>
              <div class="tablelists martop10">
                <el-table :data="tableData" ref="mainTable" border style="width: 100%">
                <el-table-column prop="dat" label="" min-width="90" align="center"> </el-table-column>
                <el-table-column  label="1小时"  align="center" min-width="180"> 
                  <template v-if="scope.row.tim1" slot-scope="scope">
                    <p class="rtprp">{{scope.row.tim1.p}}</p>
                    <p class="rtprp1">
                      <!-- <span class="rtprpsp" :style="{'background-color':scope.row.tim1.remark}">{{scope.row.tim1.rfP}}</span> -->
                      <span class="rtprpsp" :style="{'background-color':scope.row.tim1.remark}">{{scope.row.tim1.rfP}}</span>
                      <span class="rtprpsp1" :style="{'background-color':scope.row.tim1.remark}">{{scope.row.tim1.rcint}}</span>
                    </p>
                  </template>
                </el-table-column>
                <el-table-column  label="3小时"  align="center"  min-width="180">
                   <template v-if="scope.row.tim3" slot-scope="scope">
                    <p class="rtprp">{{scope.row.tim3.p}}</p>
                    <p class="rtprp1">
                      <span class="rtprpsp" :style="{'background-color':scope.row.tim3.remark}">{{scope.row.tim3.rfP}}</span>
                      <span class="rtprpsp" :style="{'background-color':scope.row.tim3.remark}">{{scope.row.tim3.rcint}}</span>
                    </p>
                  </template>
                </el-table-column>
                <el-table-column  label="6小时"  align="center"  min-width="180"> 
                   <template v-if="scope.row.tim6" slot-scope="scope">
                    <p class="rtprp">{{scope.row.tim6.p}}</p>
                    <p class="rtprp1">
                      <span class="rtprpsp" :style="{'background-color':scope.row.tim6.remark}">{{scope.row.tim6.rfP}}</span>
                      <span class="rtprpsp" :style="{'background-color':scope.row.tim6.remark}">{{scope.row.tim6.rcint}}</span>
                    </p>
                  </template>
                </el-table-column>
                <el-table-column  label="24小时"  align="center"  min-width="180">
                   <template v-if="scope.row.tim24" slot-scope="scope">
                    <p class="rtprp">{{scope.row.tim24.p}}</p>
                    <p class="rtprp1">
                      <span class="rtprpsp" :style="{'background-color':scope.row.tim24.remark}">{{scope.row.tim24.rfP}}</span>
                      <span class="rtprpsp" :style="{'background-color':scope.row.tim24.remark}">{{scope.row.tim24.rcint}}</span>
                    </p>
                  </template>
                </el-table-column>
                </el-table>
              </div>
                <!-- <div class="boxItemLitleTitle">
                降雨检测:
              </div> -->
              
            </div>
          </div>
          <div class="content-item right-box">
            <div id="AnalysisConclusionBox" class="box-item padbom0">
              <div class="boxItemTitle">分析结论</div>
              <div class="boxItemForm textIndent" v-html="analysisRestluts" style="min-height:130px;">
                <!-- 过去24小时，<span class="colorBlue">{{wswscdInfos.name}}</span>流域最大点雨量已达<span
                  class="colorBlue"
                >353.90</span>mm，超<span
                  class="colorBlue"
                >100年一遇</span>，据气象部门预报，在充分考虑山洪灾害风险隐患可能造成的复合放大效应和降雨预报的不确定性的基础上，经过预演分析研判，建议流域内<span
                  class="colorBlue"
                >八道河村 ,北湾村 ,保安街村,许庙村,庙底村,蒿坪岭村,乱石坪村</span>加强防范，按照预案相关要求采取转移避险措施。 -->
              </div>
            </div>
            <div id="basinInfoBox" class="box-item padbom0" ref="wswscdcon" style="position: relative;min-height: 270px;">
              <div class="boxItemTitle">流域基础信息</div>
              <div class="boxItemForm boxItemFormWscd" style="left: 28px;top:52px;">
                <span class="itemWidth33">小流域名称：{{wswscdInfos.name?wswscdInfos.name:''}}</span>
                <span class="itemWidth33">小流域面积：{{wswscdInfos.area?wswscdInfos.area:'--'}}k㎡</span>
                <span class="itemWidth33">平均坡度：{{wswscdInfos.pjpd?wswscdInfos.pjpd:'--'}}°</span>
                <span class="itemWidth33">汇流时间：{{wswscdInfos.flowhour?wswscdInfos.flowhour:'--'}}小时</span>
              </div>
              <div class="boxItemForm boxItemFormWscd" style="left: 37%;top:52px;">
                <span class="itemWidth33">水文站：{{wswscdInfos.zqStNum?wswscdInfos.zqStNum:'--'}}个</span>
                <span class="itemWidth33">防治区面积：{{wswscdInfos.fzqArea?wswscdInfos.fzqArea:'--'}}k㎡</span>
                <span class="itemWidth33">涉水工程：{{wswscdInfos.ssgcNumNum?wswscdInfos.ssgcNumNum:'--'}}个</span>
                <span class="itemWidth33">气象站：{{wswscdInfos.qxStNum?wswscdInfos.qxStNum:'--'}}个</span>
                <span class="itemWidth33">企事业单位：{{wswscdInfos.qsyNum?wswscdInfos.qsyNum:'--'}}个</span>
                <span class="itemWidth33">山洪监测雨量站：{{wswscdInfos.shppNum?wswscdInfos.shppNum:'--'}}个</span>
              </div>
              <div class="boxItemForm boxItemFormWscd" ref="wswscdbom" style="left: 70%;top:52px;">
                <span class="itemWidth33">流域内县：{{wswscdInfos.county?wswscdInfos.county:'--'}}</span>
                <span class="itemWidth33">流域内乡镇：{{wswscdInfos.town?wswscdInfos.town:'--'}}</span>
                <span class="itemWidth33">涉及行政村：{{wswscdInfos.villageNum?wswscdInfos.villageNum:'--'}}个</span>
                <span class="itemWidth33">涉及自然村\村组：{{wswscdInfos.villageZuNum?wswscdInfos.villageZuNum:'--'}}个</span>
                <span class="itemWidth33">流域内人口：{{wswscdInfos.peoNum?wswscdInfos.peoNum:'--'}}人</span>
                <span class="itemWidth33">流域内危险区：{{wswscdInfos.danNum?wswscdInfos.danNum:'--'}}个</span>
              </div>
            </div>
            <div id="PreviewSchemeBox" class="box-item">
              <div class="boxItemTitle">预演方案</div>
              <el-row class="boxItemForm">
                <el-col :span="12">
                  <span  >方案名称：{{rehearInfos.name?rehearInfos.name:'--'}}</span>
                </el-col>
                <el-col :span="12">
                  <span >创建人：{{rehearInfos.userName?rehearInfos.userName:'--'}}</span>
                </el-col>
                <el-col :span="12">
                  <span v-if="rehearInfos.rehearsalType=='1'">预演类型：预报预演</span>
                  <span v-else-if="rehearInfos.rehearsalType=='2'">预演类型：历史复盘</span>
                  <span v-else-if="rehearInfos.rehearsalType=='3'">预演类型：极端情景</span>
                  <span v-else>预演类型：--</span>
                </el-col>
                <el-col :span="12">
                  <span >生成时间：{{rehearInfos.createddate?$moment(rehearInfos.createddate).format("YYYY-MM-DD HH:mm:ss"):'--'}}</span>
                </el-col>
                <el-col :span="12">
                  <span >隐患类别：{{rehearInfos.hiddenType?rehearInfos.hiddenType:'--'}}</span>
                </el-col>
                 <el-col :span="12">
                  <span >预演时段：{{rehearInfos.rainStart?$moment(rehearInfos.rainStart).format("YYYY-MM-DD HH:mm:ss"):''}} 至 {{rehearInfos.rainEnd?$moment(rehearInfos.rainEnd).format("YYYY-MM-DD HH:mm:ss"):''}}</span>
                </el-col>
              </el-row>
               <div class="boxItemLitleTitle">
                预警与预演结果的风险对照表:
              </div>
              <div class="tablelists curtrpoin">
                <el-table :data="tableData1" border style="width: 100%"  @row-click="exportBtn">
                <el-table-column prop="ewName" label="村庄名称" min-width="180" align="center"> </el-table-column>
                <el-table-column prop="townAdnm" label="所属乡镇" min-width="130" align="center"> </el-table-column>
                <el-table-column  label="预演"  align="center"> 
                  <el-table-column prop="levelNumber" label="风险等级" min-width="90" align="center"> 
                     <template slot-scope="scope">
                      <span v-if="scope.row.levelNumber == '1'" class="warngYy1">极危险</span>
                      <span v-if="scope.row.levelNumber == '2'" class="warngYy2">危险</span>
                      <span v-if="scope.row.levelNumber == '3'" class="warngYy3">警戒</span>
                      <span v-if="scope.row.levelNumber == '4'" class="warngYy4">关注</span>
                    </template>
                  </el-table-column>
                  <el-table-column  prop="tm" label="风险时间" min-width="180" align="center">  
                     <template slot-scope="scope">
                      <span v-if="scope.row.tm">{{$moment(scope.row.tm).format("YYYY-MM-DD HH:mm:ss")}}</span>
                      
                    </template>
                  </el-table-column>
                </el-table-column>
                <el-table-column  label="预警"  align="center"> 
                  <el-table-column prop="levelNumberFx" label="风险等级" min-width="90" align="center"> 
                   <template slot-scope="scope">
                    <span v-if="scope.row.levelNumberFx == '1'" class="warngYy1">极危险</span>
                    <span v-if="scope.row.levelNumberFx == '2'" class="warngYy2">危险</span>
                    <span v-if="scope.row.levelNumberFx == '3'" class="warngYy3">警戒</span>
                    <span v-if="scope.row.levelNumberFx == '4'" class="warngYy4">关注</span>
                    <!-- <span v-if="scope.row.levelNumberFx == null" >无预警</span> -->
                  </template>
                   </el-table-column>
                  <el-table-column prop="fxWarningTm" label="风险时间" min-width="180" align="center"> 
                     <template slot-scope="scope">
                    <span v-if="scope.row.fxWarningTm">{{$moment(scope.row.fxWarningTm).format("YYYY-MM-DD HH:mm:ss")}}</span>
                     </template>
                  </el-table-column>
                </el-table-column>
                
                </el-table>
              </div>
              <!-- 预警与预演结果的风险对照表: ----end---- -->
              <!-- 转移安置点判断: ----strat-------->
              <div class="boxItemLitleTitle martop10">
                  转移安置点判断:
              </div>
               <div class="tablelists">
                <el-table :data="tableData2" border empty-text="暂无被淹安置点数据" style="width: 100%">
                 <el-table-column
                  v-for="(row, index) in columnData"
                  :key="index"
                  :prop="row.field"
                  :label="row.title"
                  align="center"
                  :min-width="row.columnWidth || 120"
                  show-overflow-tooltip
                ></el-table-column>
                
                </el-table>
              </div>
               <!-- 转移安置点判断: ----end------------->
            </div>
          </div>
        </div>
      </div>

    </div>
  </div>
</template>
<script>
import html2canvas from 'html2canvas'
import JsPDF from 'jspdf'
import printJS from 'print-js';
import miniMap from '../../../map/leaflet/MiniMap.vue'
import {
    GetExepData
} from '@/api/zyx.js'
export default {
  components: {
        miniMap
    },
    // 接受父组件传递的值
    data() {
        return {
            exepData: {},
            wswscdInfos:{},//流域信息
            rehearInfos:{},//预演方案
            parameter: {},
            analysisRestluts:'',//分析结论
            loading: false,
            btnload:false,
            isPrint:false,
            tableData:[],
            tableData1:[],
            tableData2:[],
            tableData3:[],
            columnData:[{ field: 'tranName', title: '预案转移避险点', columnWidth: '150' },
                        { field: 'propose', title: '系统建议', columnWidth: '180' },
                        { field: 'proposeReson', title: '建议原因', columnWidth: '200' },
                       ],
            loadId:'',
        }
    },
    mounted() {
        //this.GetData()
    },
    created() {
     
        if (this.$route.query.id) {
            this.GetData()
        }
    },
    methods: {
        GetData() { // 对接列表数据
            this.loading = true
            const param = {
                id: this.$route.query.id
            }
            GetExepData(param).then((res) => {
                this.loading = false
                if (res.isSuccess && res.data) {
                    let dalist = res.data;
                    this.exepData = dalist.rainInfo;
                    //this.tableData =[{dat:'最大雨量重现期统计'}]; //dalist.stPRfPList.legnth?dalist.stPRfPList:[];
                    this.analysisRestluts = dalist.analysisRestlut?dalist.analysisRestlut:'';
                    this.wswscdInfos = dalist.wswscdInfo;
                    this.rehearInfos = dalist.rehearInfo;
                    this.tableData1 = dalist.riskDroList?dalist.riskDroList:[];//预警预演对照
                    this.tableData3 = dalist.wscdPList?dalist.wscdPList:[];//预警预演对照
                    this.tableData2 = dalist.tanSiteList?dalist.tanSiteList:[];
                    //处理降雨检测
                    this.rainfalldat(dalist.stPRfPList);
                    //wswscdbom
                   
                   this.$nextTick(()=>{
                    // console.log( this.$refs.wswscdbom.offsetHeight)
                    this.$refs.wswscdcon.style.height = this.$refs.wswscdbom.offsetHeight+25+'px';
                   });
                   
                } else {
                    this.$message.error(res.message)
                }
            }).catch(err=>{
               this.loading = false
            })
        },
        rainfalldat(dat){
          let list = dat;
          this.tableData = [];
          if(list.length){
            let obj = {
               dat:'最大雨量重现期统计',//最大雨量重现期统计  面雨量
               tim1:'',
               tim3:'',
               tim6:'',
               tim24:'',
            }
            list.forEach(item => {
               if(Number(item.step)/60 == 1){
                 obj.tim1 = item;
               }else if(Number(item.step)/60 == 3){
                 obj.tim3 = item;
               }else if(Number(item.step)/60 == 6){
                 obj.tim6 = item;
               }else if(Number(item.step)/60 == 24){
                 obj.tim24 = item;
               }
              
            });
            // console.log(obj)
            this.tableData.push(obj);
           // console.log(this.tableData)
          //  this.$nextTick(() => {
          //   this.$refs.mainTable.doLayout();
           
          // });
          }else{
             this.tableData = [{dat:'最大雨量重现期统计'}];
          }
          
        },
        PrintPdf: function() {
            this.isPrint = true
            html2canvas(this.$refs.pdfDom, {
                allowTaint: true,
                taintTest: false,
                useCORS: true,
                dpi: window.devicePixelRatio * 4,
                scale: 4
            }).then((canvas) => {
                const url = canvas.toDataURL()
                printJS({
                    printable: url, // 要打印的id
                    type: 'image',
                    style: '@page{size:auto;margin: 0cm 1cm 0cm 1cm;}' // 去除页眉页脚
                })
                this.isPrint = false
            })
        },
        downLoadPdf: function() {
            let that = this;
            this.btnload = true;
            return html2canvas(this.$refs.pdfDom, {
                backgroundColor: '#fff', // 背景颜色
                dpi: 1000, // 将分辨率提高到特定的dpi,默认值为96 处理模糊问题，越高越清晰，文件越大
                scale: 1, // 用于渲染的比例尺。默认为浏览器设备像素比率。默认值是1，手机端设置成2
                useCORS: true, // 是否尝试使用CORS从服务器加载图像
                allowTaint: true,
            }).then((canvas) => {
                // this.posterUrl = canvas.toDataURL('image/png')
                var pdfWidth = canvas.width
                var pdfHeight = canvas.height
                var pageHeight = pdfWidth / 592.28 * 841.89
                var leftHeight = pdfHeight
                var position = 0
                var imgWidth = 595.28
                var imgHeight = 595.28 / pdfWidth * pdfHeight
                var pageData = canvas.toDataURL('img/jpeg', 1.0)
                var pdf = new JsPDF('', 'pt', 'a4')
                // 判断打印dom高度是否需要分页，如果需要进行分页处理
                if (leftHeight < pageHeight) {
                    pdf.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight)
                } else {
                    while (leftHeight > 0) {
                        pdf.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight)
                        leftHeight -= pageHeight
                        position -= 841.89
                        if (leftHeight > 0) {
                            pdf.addPage()
                        }
                    }
                };
                let pdname = that.wswscdInfos.name?that.wswscdInfos.name+".pdf": '分析报告.pdf';
                pdf.save(pdname);
                that.btnload = false;
                that.$message({
                        message: '导出PDF成功',
                        type: 'success',
                        duration: 2000
                });
                // pdf.save('分析报告.pdf');
                // that.btnload = false;
            })
        },
        exportBtn(row) {
           // console.log(row);
            let loadIds = row.ewCode; //  row.id; //'372cdea9-9426-490e-8798-47b1f430e25e';
            if(loadIds){
              this.$message({
                  message: '这条数据没有预案报告！！！',
                  type: 'warning',
                  duration: 2500
              });
            }
            const { href } = this.$router.resolve({ path: '/reserveplan/reportReservePlan?id=' + loadIds +'&planName='+row.ewName})
            window.open(href, '_blank')
        }
    }
}
</script>

<style lang="scss" scoped>
	.ScaleBox {
		width: 100%;
		min-width: 1200px;
		height: 100%;
		overflow: hidden;
		position: absolute;
		transform: scaleX(var(--scaleX)) scaleY(var(--scaleY));
		display: flex;
		flex-direction: column;
		transform-origin: 0 0;
		left: 0;
		top: 0;
		transition: .3s;
		z-index: 999;
	}

	.reportBox {
		width: 100%;
		height: 100%;
		background-color: #fff;
		color: #000;
    overflow-y: auto;
		#pdfDomBox {
			padding: 0px 70px;
		}

		.btn-box {

			padding: 25px 70px 0;

			.btn-item {
				display: inline-block;
				height: 40px;
				line-height: 40px;
        padding: 0 20px;
        border: 1px solid #dadde0;
        color: #228fff;
        margin-right: 10px;
        border-radius: 8px;
        font-size: 15px;
        cursor: pointer
			}
		}

		.reportHeader {
			font-size: 40px;
			line-height: 50px;
			font-weight: bolder;
			text-align: center;
			margin-bottom: 47px;
      // margin-top:15px;

		}

		.print-content {
			display: flex;
			justify-content: space-between;
			height: 100%;
			overflow: auto;

			.left-box {
				width: 49%;
				margin-right: 2%;
			}

			.right-box {
				width: 48%;
			}

			.box-item {
				width: 100%;
				border-radius: 12px;
				border: 1px solid #dadde0;
				margin-bottom: 20px;
				padding: 25px 28px;
				position: relative;

				.boxItemTitle {
					width: 200px;
					height: 32px;
					line-height: 34px;
					padding-left: 42px;
					font-size: 22px;
					color: #fff;
					font-weight: bolder;
					background-image: url('~@/assets/newimg/reportTitleBg.png');
					background-repeat: no-repeat;
					background-size: 100% 100%;
				}

				#mapBoxTitle {
					position: absolute;
					left: 28px;
					top: 25px;
				}

				.boxItemForm {
					font-size: 24px;
					line-height: 32px;
					margin-top: 15px;
					font-size: 15px;
					margin-bottom: 10px;

					.marginRightSpan {
						margin-right: 70px;
					}

					.colorBlue {
						color: #228fff;
						font-weight: bolder;
					}
				}
				.textIndent{
					text-indent: 2em;
				}
				.boxItemLitleTitle {
					height: 32px;
					line-height: 30px;
					font-size: 18px;
					font-weight: bold;
					color: #228fff;
					margin-bottom: 5px;
				}
				.boxItemFormWscd{
					width: 30%;
					position: absolute;
					.itemWidth33{
						display: block;
					}
				}
			}
      .padbom0{
        padding-bottom:0px;
      }
			#mapBox {
				height: 600px;
				// background-color: lightblue;
			}
		}
  }
  .martop10{
    margin-top:10px;
  }
  .warngYy1 {
  color: #fc0000;
}
.warngYy2 {
  color: #f0810b;
}
.warngYy3 {
  color: #f0c90b;
}
.warngYy4 {
  color: #00a2fb;
}
.rtprp{
  float: left;
  width: 30%;
  line-height: 56px;
}
.rtprp1{
  display: inline-block;
  width: 69%;
  text-align:left;
}
.rtprpsp{
    display: inline-block;
    width:80px;
    margin-bottom: 6px;
   
    border-radius: 4px;
    // height: 22px;
    line-height: 22px;
    color: #fff;
    background-color: rgb(136, 102, 205);
    text-align: center;
}
.rtprpsp1{
  display: inline-block;
  margin-bottom: 6px;
 
  width:80px;
  border-radius: 4px;
  // height: 22px;
  line-height: 22px;
  color: #fff;
  background-color: rgb(136, 102, 205);
  text-align: center;
}
.margBot20{
  margin-bottom: 20px;
}
.nockickn{
  pointer-events: none;
}
.bordsild{
  border-radius: 12px;
  border: 1px solid #dadde0;
  padding: 10px;
  position: relative;
}
.zhbtnbox{
   .btntxt{
     background-color: #fff;
     color: #606266;
   }
   .btntxt:hover{
      background-color: #ecf5ff;
      color: #409EFF;
   }
   .btntxt:active {
    color: #3a8ee6;
    border-color: #3a8ee6;
    outline: none;
}
}
.curtrpoin::v-deep{
   .el-table__body{
          tr{
             cursor: pointer; 
          }
   }
}
.tablelists::v-deep{
   
   .el-table__body-wrapper{
        background-color: #f8f8f8;
      }
      .el-table{
        .has-gutter{
        th{
          padding:8px 0px;
          font-size:13px;
          background-color: #eaebec;
          border: 1px solid #dadde0;
          border-bottom: 1px solid #dadde0!important;
          label{
            margin-bottom:0px;
  
          }
          .cell{
            font-size:13px;
            line-height: 1.42857;
            color:#333;
          }
        }
        .el-table__cell {
          background-color: #eaebec;
        }
        }
        .cell{
            font-size:13px;
            line-height: 1.42857;
          }
        
        td{
           padding:8px 0px;
           font-size:13px;
           color:#333;
         
          label{
            margin-bottom:0px;
          }
          .cell{
            font-size:13px;
            line-height: 1.42857;
          }
  
        }
        .el-table__body{
           border-left: 1px solid #dadde0;
          tr{
            // background-color:transparent;
            background-color:#fff;
             .el-table__cell {
              border-bottom:1px solid #dadde0!important;
              border-right: 1px solid #dadde0;
             }
          }
          tr:hover{
            td{
            background-color: #F5F7FA!important;
           }

          } 
        }
      }
}
</style>
<style lang="scss">
.boxItemForm{
  .colorBlue {
						color: #228fff;
            font-weight: bolder;
  }
} 
</style>

